<template>
	<view class="filter-bar">
		<cl-filter-bar v-model="flt.form" @change="flt.onChange">
			<cl-filter-item label="综合" prop="score" type="switch" />
			<cl-filter-item label="销量" prop="sold" type="order" />
			<cl-filter-item label="价格" prop="price" type="order" />

			<view class="cl-filter-item" @tap="adv.open">
				<text>筛选</text>
				<cl-icon class-name="shop-icon-filter" :size="36" />
			</view>
		</cl-filter-bar>

		<!-- 已选筛选条件显示 -->
		<view class="filter-tags" v-if="hasActiveFilters">
			<scroll-view scroll-x class="tags-container">
				<view class="tags-list">
					<view
						v-if="adv.form.priceRange || adv.form.minPrice || adv.form.maxPrice"
						class="filter-tag"
						@tap="clearPriceFilter"
					>
						<text>价格: {{ getPriceDisplay() }}</text>
						<cl-icon name="cl-icon-close" :size="24" />
					</view>
					<view
						v-if="adv.form.brandIds.length > 0"
						class="filter-tag"
						@tap="adv.form.brandIds = []"
					>
						<text>品牌: {{ adv.form.brandIds.length }}个</text>
						<cl-icon name="cl-icon-close" :size="24" />
					</view>
					<view
						v-if="adv.form.dosage.length > 0"
						class="filter-tag"
						@tap="adv.form.dosage = []"
					>
						<text>剂型: {{ adv.form.dosage.length }}个</text>
						<cl-icon name="cl-icon-close" :size="24" />
					</view>
					<view
						v-if="adv.form.prescriptionType"
						class="filter-tag"
						@tap="adv.form.prescriptionType = ''"
					>
						<text>{{
							adv.form.prescriptionType === "otc" ? "非处方药" : "处方药"
						}}</text>
						<cl-icon name="cl-icon-close" :size="24" />
					</view>
					<view class="clear-all" @tap="clearAllFilters"> 清空筛选 </view>
				</view>
			</scroll-view>
		</view>
	</view>

	<!-- 侧边筛选 -->
	<cl-popup v-model="adv.visible" direction="right" :size="600" :padding="0">
		<view class="filter-adv">
			<!-- 筛选内容 -->
			<scroll-view scroll-y class="filter-adv__container">
				<view class="filter-adv__list">
					<!-- 价格区间 -->
					<view class="filter-adv__item">
						<text class="label">价格区间</text>
						<view class="price-range">
							<view class="price-options">
								<view
									class="price-item"
									v-for="range in priceRanges"
									:key="range.value"
									:class="{
										'is-active': adv.form.priceRange === range.value,
									}"
									@tap="selectPriceRange(range.value)"
								>
									{{ range.label }}
								</view>
							</view>
							<view class="custom-price">
								<input
									class="price-input"
									type="number"
									placeholder="最低价"
									v-model="adv.form.minPrice"
									@blur="onPriceChange"
								/>
								<text class="price-separator">-</text>
								<input
									class="price-input"
									type="number"
									placeholder="最高价"
									v-model="adv.form.maxPrice"
									@blur="onPriceChange"
								/>
								<text class="price-unit">元</text>
							</view>
						</view>
					</view>

					<!-- 品牌 -->
					<view class="filter-adv__item">
						<view class="label-with-toggle">
							<text class="label">品牌</text>
							<text class="toggle-text" @tap="toggleBrandExpand">
								{{ brandExpanded ? "收起" : "展开全部" }}
								<cl-icon
									:name="brandExpanded ? 'arrow-up' : 'arrow-down'"
									:size="24"
								/>
							</text>
						</view>
						<view class="brand-list">
							<view
								class="brand-item"
								v-for="(brand, index) in displayedBrands"
								:key="brand.id"
								:class="{
									'is-active': adv.form.brandIds.includes(brand.brandID),
								}"
								@tap="toggleBrand(brand.brandID)"
							>
								{{ brand.name }}
							</view>
						</view>
					</view>

					<!-- 分类 -->
					<view class="filter-adv__item">
						<cl-loading-mask :loading="type.loading">
							<view class="category">
								<!-- 一级 -->
								<template v-for="m1 in type.list">
									<view class="m1" :key="m1.id" v-if="m1.children">
										<text class="label">
											{{ m1.name }}
										</text>

										<view class="m1-list">
											<!-- 二级 -->
											<view
												class="m2"
												v-for="m2 in m1.children"
												:key="m2.id"
												:class="{
													'is-active': adv.form.typeId.includes(m2.id!),
												}"
												@tap="type.select(m2)"
											>
												{{ m2.name }}
											</view>
										</view>
									</view>
								</template>
							</view>
						</cl-loading-mask>
					</view>

					<!-- 库存 -->
					<view class="filter-adv__item">
						<text class="label">库存</text>
						<view class="stock-options">
							<view
								class="stock-item"
								:class="{
									'is-active': adv.form.stock === '',
								}"
								@tap="selectStock('')"
							>
								全部
							</view>
							<view
								class="stock-item"
								:class="{
									'is-active': adv.form.stock === 'in_stock',
								}"
								@tap="selectStock('in_stock')"
							>
								有库存
							</view>
							<view
								class="stock-item"
								:class="{
									'is-active': adv.form.stock === 'out_of_stock',
								}"
								@tap="selectStock('out_of_stock')"
							>
								无库存
							</view>
						</view>
					</view>

					<!-- 剂型 -->
					<view class="filter-adv__item">
						<text class="label">剂型</text>
						<view class="dosage-list">
							<view
								class="dosage-item"
								v-for="dosage in dosageOptions"
								:key="dosage.value"
								:class="{
									'is-active': adv.form.dosage.includes(dosage.value),
								}"
								@tap="toggleDosage(dosage.value)"
							>
								{{ dosage.label }}
							</view>
						</view>
					</view>

					<!-- 处方类型 -->
					<view class="filter-adv__item">
						<text class="label">处方类型</text>
						<view class="prescription-options">
							<view
								class="prescription-item"
								:class="{
									'is-active': adv.form.prescriptionType === '',
								}"
								@tap="selectPrescriptionType('')"
							>
								全部
							</view>
							<view
								class="prescription-item"
								:class="{
									'is-active': adv.form.prescriptionType === 'otc',
								}"
								@tap="selectPrescriptionType('otc')"
							>
								<cl-icon name="cl-icon-medical" :size="28" class="otc-icon" />
								<text>非处方药</text>
							</view>
							<view
								class="prescription-item"
								:class="{
									'is-active': adv.form.prescriptionType === 'rx',
								}"
								@tap="selectPrescriptionType('rx')"
							>
								<cl-icon name="cl-icon-yao" :size="28" class="rx-icon" />
								<text>处方药</text>
							</view>
						</view>
					</view>

					<!-- 属性 -->
					<view class="filter-adv__item">
						<text class="label">商品属性</text>
						<view class="attribute-list">
							<view
								class="attribute-item"
								v-for="attr in attributeOptions"
								:key="attr.value"
								:class="{
									'is-active': adv.form.attribute.includes(attr.value),
								}"
								@tap="toggleAttribute(attr.value)"
							>
								<cl-icon
									v-if="attr.icon"
									:name="attr.icon"
									:size="32"
									class="attr-icon"
								/>
								{{ attr.label }}
							</view>
						</view>
					</view>
				</view>
			</scroll-view>

			<!-- 操作按钮 -->
			<view class="filter-adv__footer">
				<view class="inner">
					<button class="reset" @tap="adv.reset">重置</button>
					<button class="confirm" @tap="adv.confirm">确定</button>
				</view>
			</view>
		</view>
	</cl-popup>
</template>

<script lang="ts" setup>
import { cloneDeep, isEmpty } from "lodash-es";
import { useCool } from "/@/cool";
import { deepTree } from "/@/cool/utils";
import { onMounted, reactive, computed, ref } from "vue";

interface Type extends Eps.GoodsTypeEntity {
	children?: Eps.GoodsTypeEntity[];
}

const emit = defineEmits(["search"]);

const { service, router } = useCool();

// 品牌列表
const brandList = ref<any[]>([]);

// 品牌展开状态
const brandExpanded = reactive({ value: false });

// 显示的品牌列表
const displayedBrands = computed(() => {
	return brandExpanded.value ? brandList.value : brandList.value.slice(0, 10);
});

// 是否有激活的筛选条件
const hasActiveFilters = computed(() => {
	const {
		brandIds,
		dosage,
		prescriptionType,
		priceRange,
		minPrice,
		maxPrice,
		typeId,
		stock,
		attribute,
	} = adv.form;
	return (
		brandIds.length > 0 ||
		dosage.length > 0 ||
		prescriptionType ||
		priceRange ||
		minPrice ||
		maxPrice ||
		typeId.length > 0 ||
		stock ||
		attribute.length > 0
	);
});

// 价格区间选项
const priceRanges = [
	{ label: "全部", value: "" },
	{ label: "0-50元", value: "0-50" },
	{ label: "50-100元", value: "50-100" },
	{ label: "100-200元", value: "100-200" },
	{ label: "200-500元", value: "200-500" },
	{ label: "500元以上", value: "500+" },
];

// 剂型选项
const dosageOptions = [
	{ label: "片剂", value: "tablet" },
	{ label: "胶囊剂", value: "capsule" },
	{ label: "颗粒剂", value: "granule" },
	{ label: "口服液", value: "oral_liquid" },
	{ label: "注射剂", value: "injection" },
	{ label: "软膏剂", value: "ointment" },
	{ label: "贴剂", value: "patch" },
	{ label: "滴剂", value: "drops" },
	{ label: "喷雾剂", value: "spray" },
	{ label: "丸剂", value: "pill" },
];

// 属性选项
const attributeOptions = [
	{ label: "新品上市", value: 1, icon: "cl-icon-new" },
	{ label: "热销药品", value: 2, icon: "cl-icon-hot" },
	{ label: "推荐药品", value: 3, icon: "cl-icon-like" },
	{ label: "特价药品", value: 4, icon: "cl-icon-favor" },
	{ label: "近效期", value: 5, icon: "cl-icon-time" },
	{ label: "限购药品", value: 8, icon: "cl-icon-warn" },
];

// 高级搜索
const adv = reactive({
	visible: false,

	form: {
		typeId: [] as number[],
		brandIds: [] as string[],
		stock: "",
		attribute: [] as number[],
		priceRange: "",
		minPrice: "",
		maxPrice: "",
		dosage: [] as string[],
		prescriptionType: "",
	},
	_form: null as any,

	open() {
		adv.visible = true;

		// 默认表单
		if (!adv._form) {
			adv._form = cloneDeep(adv.form);
		}

		// 获取分类
		type.refresh();

		// 获取品牌列表
		if (brandList.value.length === 0) {
			loadBrands();
		}
	},

	close() {
		adv.visible = false;
	},

	reset() {
		adv.form = cloneDeep(adv._form);
		adv.confirm();
	},

	confirm() {
		adv.close();
		toSearch();
	},
});

// 过滤
const flt = reactive({
	form: {
		sold: "",
		price: "desc",
		score: false,
	},

	onChange({ prop, value }: { prop: "sold" | "price" | "score"; value: never }) {
		flt.form.sold = "";
		flt.form.price = "";
		flt.form.score = false;
		flt.form[prop] = value;

		switch (prop) {
			case "score":
				toSearch({
					order: undefined,
					sort: undefined,
				});
				break;

			case "price":
			case "sold":
				toSearch({
					order: value ? prop : undefined,
					sort: value || undefined,
				});
				break;
		}
	},
});

// 商品分类
const type = reactive({
	list: [] as Type[],
	loading: false,

	async refresh() {
		type.loading = true;

		await service.goods.type.list().then((res) => {
			type.list = deepTree(res);
		});

		type.loading = false;
	},

	select(item: Type) {
		const i = adv.form.typeId.indexOf(item.id!);

		if (i >= 0) {
			adv.form.typeId.splice(i, 1);
		} else {
			adv.form.typeId.push(item.id!);
		}
	},
});

// 获取品牌列表
async function loadBrands() {
	try {
		const res = await service.brand.info.list();
		brandList.value = res || [];
	} catch (error) {
		console.error("获取品牌列表失败:", error);
	}
}

// 切换品牌选择
function toggleBrand(brandId: string) {
	const index = adv.form.brandIds.indexOf(brandId);
	if (index >= 0) {
		adv.form.brandIds.splice(index, 1);
	} else {
		adv.form.brandIds.push(brandId);
	}
}

// 切换品牌展开
function toggleBrandExpand() {
	brandExpanded.value = !brandExpanded.value;
}

// 选择价格区间
function selectPriceRange(value: string) {
	adv.form.priceRange = value;
	if (value) {
		// 根据选择的区间设置最小和最大价格
		const [min, max] = value.split("-");
		adv.form.minPrice = min;
		adv.form.maxPrice = max === "+" ? "" : max;
	} else {
		adv.form.minPrice = "";
		adv.form.maxPrice = "";
	}
}

// 价格输入变化
function onPriceChange() {
	// 清除价格区间选择
	adv.form.priceRange = "";
}

// 选择库存状态
function selectStock(value: string) {
	adv.form.stock = value;
}

// 切换剂型选择
function toggleDosage(value: string) {
	const index = adv.form.dosage.indexOf(value);
	if (index >= 0) {
		adv.form.dosage.splice(index, 1);
	} else {
		adv.form.dosage.push(value);
	}
}

// 选择处方类型
function selectPrescriptionType(value: string) {
	adv.form.prescriptionType = value;
}

// 切换属性选择
function toggleAttribute(value: number) {
	const index = adv.form.attribute.indexOf(value);
	if (index >= 0) {
		adv.form.attribute.splice(index, 1);
	} else {
		adv.form.attribute.push(value);
	}
}

// 搜索
function toSearch(params?: any) {
	const { typeId, brandIds, stock, attribute, minPrice, maxPrice, dosage, prescriptionType } =
		adv.form;

	const data = {
		page: 1,
		typeId: isEmpty(typeId) ? undefined : typeId,
		brandIds: isEmpty(brandIds) ? undefined : brandIds,
		stock: stock === "" ? undefined : stock,
		attribute: isEmpty(attribute) ? undefined : attribute,
		minPrice: minPrice || undefined,
		maxPrice: maxPrice || undefined,
		dosage: isEmpty(dosage) ? undefined : dosage,
		prescriptionType: prescriptionType || undefined,
		...params,
	};

	emit("search", data);
}

// 获取价格显示文本
function getPriceDisplay() {
	if (adv.form.priceRange) {
		const range = priceRanges.find((r) => r.value === adv.form.priceRange);
		return range?.label || "";
	}
	if (adv.form.minPrice && adv.form.maxPrice) {
		return `${adv.form.minPrice}-${adv.form.maxPrice}元`;
	}
	if (adv.form.minPrice) {
		return `${adv.form.minPrice}元以上`;
	}
	if (adv.form.maxPrice) {
		return `${adv.form.maxPrice}元以下`;
	}
	return "";
}

// 清除价格筛选
function clearPriceFilter() {
	adv.form.priceRange = "";
	adv.form.minPrice = "";
	adv.form.maxPrice = "";
	toSearch();
}

// 清空所有筛选条件
function clearAllFilters() {
	adv.form = cloneDeep(adv._form);
	toSearch();
}

onMounted(async () => {
	const { typeId, brandId } = router.query;

	if (typeId) {
		adv.form.typeId = typeId.split(",").map(Number);
	}

	// 加载品牌列表
	await loadBrands();

	if (brandId) {
		adv.form.brandIds = [brandId as string];
		// 初始化默认表单状态
		adv._form = cloneDeep(adv.form);
		// 不在这里触发搜索，让list.vue的onReady统一处理
	}
});

// 获取当前筛选条件
function getSearchParams() {
	const { typeId, brandIds, stock, attribute, minPrice, maxPrice, dosage, prescriptionType } =
		adv.form;

	return {
		typeId: isEmpty(typeId) ? undefined : typeId,
		brandIds: isEmpty(brandIds) ? undefined : brandIds,
		stock: stock === "" ? undefined : stock,
		attribute: isEmpty(attribute) ? undefined : attribute,
		minPrice: minPrice || undefined,
		maxPrice: maxPrice || undefined,
		dosage: isEmpty(dosage) ? undefined : dosage,
		prescriptionType: prescriptionType || undefined,
	};
}

// 暴露方法给父组件
defineExpose({
	getSearchParams,
});
</script>

<style lang="scss" scoped>
.filter-bar {
	position: relative;
}

.filter-tags {
	background-color: #fff;
	border-top: 1rpx solid #f0f0f0;
	padding: 16rpx 0;

	.tags-container {
		height: 60rpx;
		width: 100%;
	}

	.tags-list {
		display: flex;
		align-items: center;
		padding: 0 24rpx;
		white-space: nowrap;
		gap: 16rpx;
	}

	.filter-tag {
		display: inline-flex;
		align-items: center;
		gap: 8rpx;
		padding: 8rpx 20rpx;
		background: linear-gradient(
			135deg,
			rgba($cl-color-primary, 0.1),
			rgba($cl-color-primary, 0.05)
		);
		border: 1rpx solid rgba($cl-color-primary, 0.3);
		border-radius: 30rpx;
		font-size: 24rpx;
		color: $cl-color-primary;
		transition: all 0.3s ease;

		&:active {
			transform: scale(0.95);
			background: linear-gradient(
				135deg,
				rgba($cl-color-primary, 0.15),
				rgba($cl-color-primary, 0.08)
			);
		}
	}

	.clear-all {
		display: inline-flex;
		align-items: center;
		padding: 8rpx 20rpx;
		font-size: 24rpx;
		color: #999;
		border: 1rpx solid #e8e8e8;
		border-radius: 30rpx;
		background-color: #f8f8f8;
		transition: all 0.3s ease;

		&:active {
			transform: scale(0.95);
			background-color: #f0f0f0;
		}
	}
}

.filter-adv {
	background-color: #f8f9fa;
	height: 100%;

	&__container {
		height: calc(100% - 100rpx);
	}

	&__list {
		padding: 20rpx;
	}

	&__item {
		background-color: #fff;
		margin-bottom: 20rpx;
		padding: 28rpx;
		border-radius: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
		transition: all 0.3s ease;

		&:active {
			transform: scale(0.98);
		}

		.label {
			display: block;
			font-size: 30rpx;
			font-weight: 600;
			color: #1a1a1a;
			margin-bottom: 24rpx;
			line-height: 1;
		}

		.label-with-toggle {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 24rpx;

			.toggle-text {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: $cl-color-primary;
				font-weight: 500;
			}
		}

		// 价格区间样式
		.price-range {
			.price-options {
				display: flex;
				flex-wrap: wrap;
				gap: 16rpx;
				margin-bottom: 20rpx;
			}

			.price-item {
				padding: 14rpx 28rpx;
				border: 2rpx solid #e8e8e8;
				border-radius: 36rpx;
				font-size: 26rpx;
				color: #666;
				background-color: #f7f8fa;
				transition: all 0.3s ease;

				&.is-active {
					color: #fff;
					border-color: $cl-color-primary;
					background: linear-gradient(
						135deg,
						$cl-color-primary,
						lighten($cl-color-primary, 10%)
					);
					box-shadow: 0 4rpx 12rpx rgba($cl-color-primary, 0.3);
				}
			}

			.custom-price {
				display: flex;
				align-items: center;
				gap: 16rpx;
				margin-top: 20rpx;

				.price-input {
					flex: 1;
					height: 72rpx;
					padding: 0 24rpx;
					border: 2rpx solid #e8e8e8;
					border-radius: 16rpx;
					font-size: 28rpx;
					background-color: #f7f8fa;
					transition: all 0.3s ease;

					&:focus {
						border-color: $cl-color-primary;
						background-color: #fff;
						box-shadow: 0 0 0 4rpx rgba($cl-color-primary, 0.1);
					}
				}

				.price-separator {
					color: #999;
					font-size: 24rpx;
				}

				.price-unit {
					color: #666;
					font-size: 26rpx;
				}
			}
		}

		// 品牌列表样式
		.brand-list {
			display: flex;
			flex-wrap: wrap;
			gap: 16rpx;
		}

		.brand-item {
			padding: 14rpx 28rpx;
			border: 2rpx solid #e8e8e8;
			border-radius: 36rpx;
			font-size: 26rpx;
			color: #666;
			background-color: #f7f8fa;
			transition: all 0.3s ease;

			&.is-active {
				color: #fff;
				border-color: $cl-color-primary;
				background: linear-gradient(
					135deg,
					$cl-color-primary,
					lighten($cl-color-primary, 10%)
				);
				box-shadow: 0 4rpx 12rpx rgba($cl-color-primary, 0.3);
			}
		}

		// 库存选项样式
		.stock-options {
			display: flex;
			flex-wrap: wrap;
			gap: 16rpx;
		}

		.stock-item {
			padding: 14rpx 32rpx;
			border: 2rpx solid #e8e8e8;
			border-radius: 36rpx;
			font-size: 26rpx;
			color: #666;
			background-color: #f7f8fa;
			transition: all 0.3s ease;

			&.is-active {
				color: #fff;
				border-color: $cl-color-primary;
				background: linear-gradient(
					135deg,
					$cl-color-primary,
					lighten($cl-color-primary, 10%)
				);
				box-shadow: 0 4rpx 12rpx rgba($cl-color-primary, 0.3);
			}
		}

		// 剂型列表样式
		.dosage-list {
			display: flex;
			flex-wrap: wrap;
			gap: 16rpx;
		}

		.dosage-item {
			padding: 14rpx 28rpx;
			border: 2rpx solid #e8e8e8;
			border-radius: 36rpx;
			font-size: 26rpx;
			color: #666;
			background-color: #f7f8fa;
			transition: all 0.3s ease;

			&.is-active {
				color: #fff;
				border-color: $cl-color-primary;
				background: linear-gradient(
					135deg,
					$cl-color-primary,
					lighten($cl-color-primary, 10%)
				);
				box-shadow: 0 4rpx 12rpx rgba($cl-color-primary, 0.3);
			}
		}

		// 处方类型样式
		.prescription-options {
			display: flex;
			gap: 20rpx;
		}

		.prescription-item {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 24rpx 16rpx;
			border: 2rpx solid #e8e8e8;
			border-radius: 20rpx;
			background-color: #f7f8fa;
			transition: all 0.3s ease;

			text {
				margin-top: 8rpx;
				font-size: 26rpx;
				color: #666;
			}

			.otc-icon {
				color: #52c41a;
			}

			.rx-icon {
				color: #ff4d4f;
			}

			&.is-active {
				border-color: $cl-color-primary;
				background: linear-gradient(
					135deg,
					rgba($cl-color-primary, 0.1),
					rgba($cl-color-primary, 0.05)
				);
				box-shadow: 0 4rpx 12rpx rgba($cl-color-primary, 0.2);

				text {
					color: $cl-color-primary;
					font-weight: 600;
				}
			}
		}

		// 属性列表样式
		.attribute-list {
			display: flex;
			flex-wrap: wrap;
			gap: 16rpx;
		}

		.attribute-item {
			display: flex;
			align-items: center;
			gap: 8rpx;
			padding: 14rpx 28rpx;
			border: 2rpx solid #e8e8e8;
			border-radius: 36rpx;
			font-size: 26rpx;
			color: #666;
			background-color: #f7f8fa;
			transition: all 0.3s ease;

			.attr-icon {
				color: #999;
			}

			&.is-active {
				color: #fff;
				border-color: $cl-color-primary;
				background: linear-gradient(
					135deg,
					$cl-color-primary,
					lighten($cl-color-primary, 10%)
				);
				box-shadow: 0 4rpx 12rpx rgba($cl-color-primary, 0.3);

				.attr-icon {
					color: #fff;
				}
			}
		}

		.category {
			min-height: 200rpx;

			.m1 {
				margin-bottom: 30rpx;

				&-name {
					display: flex;
					align-items: center;
					height: 80rpx;
					font-size: 28rpx;
				}

				&-list {
					width: 100%;
					line-height: normal;
					border: 2rpx solid #f7f7f7;
					padding: 5rpx 20rpx;
					box-sizing: border-box;
					border-radius: 24rpx;
				}

				&:last-child {
					margin-bottom: 0;
				}

				.m2 {
					display: inline-flex;
					justify-content: center;
					align-items: center;
					border-radius: 10rpx;
					margin: 10rpx 20rpx 10rpx 0;
					padding: 0 25rpx;
					font-size: 22rpx;
					height: 50rpx;
					text-align: center;
					border-radius: 50rpx;
					color: #444;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					border: 2rpx solid #f7f7f7;
					background-color: #f7f7f7;

					&.is-active {
						color: $cl-color-primary;
						border-color: $cl-color-primary;
						background-color: rgba($cl-color-primary, 0.1);
					}
				}
			}
		}

		&:last-child {
			margin-bottom: 0;
		}
	}

	&__footer {
		height: 120rpx;
		padding: 0 20rpx;
		background-color: #fff;
		box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.08);

		.inner {
			display: flex;
			height: 100%;
			align-items: center;
			gap: 20rpx;

			button {
				flex: 1;
				height: 88rpx;
				border-radius: 44rpx;
				font-size: 30rpx;
				font-weight: 600;
				margin: 0;
				transition: all 0.3s ease;
				border: none;

				&.reset {
					background: linear-gradient(135deg, #f5f6f8, #e8e9ec);
					color: #666;
					box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);

					&:active {
						transform: scale(0.98);
						box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.12);
					}
				}

				&.confirm {
					background: linear-gradient(
						135deg,
						$cl-color-primary,
						lighten($cl-color-primary, 10%)
					);
					color: #fff;
					box-shadow: 0 4rpx 16rpx rgba($cl-color-primary, 0.4);

					&:active {
						transform: scale(0.98);
						box-shadow: 0 2rpx 12rpx rgba($cl-color-primary, 0.5);
					}
				}
			}
		}
	}
}
</style>
